/*初始化*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

a:hover {
  color: #00AE66;
}

body {
  background: #F0F2F2;
  color: #555;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, Arial, "Droid Sans", "Microsoft YaHei", "Hiragino Sans GB", STXihei, simsun, sans-serif;
}

td,
th,
caption {
  font-size: 14px;
}

/* h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

a {
  color: #555;
  text-decoration: none;
}

img {
  border: none;
}

ol,
ul,
li {
  list-style: none;
}

input,
textarea,
select,
button {
  font: 14px Verdana, Helvetica, Arial, sans-serif;
}

.clearfix:after,
.c {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix,
.c {
  *zoom: 1;
}

.hd {
  display: none;
}

.b {
  width: 100%;
}

.bb {
  box-sizing: border-box;
}

.h {
  height: 100%;
}

.bl {
  display: block;
}

img {
  object-fit: cover;
  vertical-align: middle
}

input {
  outline: none;
  padding-left: 10px;
  box-sizing: border-box;
}

.a {
  position: absolute;
}

.p-r {
  position: relative;
  float: none;
  margin: 0;
}

.r {
  position: relative;
}

.f {
  position: fixed;
}

.oh {
  overflow: hidden;
}

.fl {
  float: left;
  display: inline-block;
}

.fr {
  float: right;
  display: inline-block;
}

.db {
  display: block;
}

.ib {
  display: inline-block;
}

.bg {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.tc {
  text-align: center;
}

.wp {
  white-space: normal;
}

.nw,
[nw] {
  white-space: nowrap;
}

.w4 {
  font-weight: 400;
}

.w7 {
  font-weight: 700;
}

.bc {
  border-collapse: collapse;
}

.at {
  margin: 0 auto;
}

.pt {
  cursor: pointer;
}

a {
  cursor: pointer;
}

body {
  background: #fff;
}

/*初始化*/

@for $i from 0 through 50 {
  .w#{$i} {
    width: #{$i}px;
  }

  .h#{$i} {
    height: #{$i}px;
  }

  .l#{$i} {
    left: #{$i}px;
  }

  .r#{$i} {
    right: #{$i}px;
  }

  .t#{$i} {
    top: #{$i}px;
  }

  .b#{$i} {
    bottom: #{$i}px;
  }

  .ml#{$i} {
    margin-left: #{$i}px;
  }

  .mr#{$i} {
    margin-right: #{$i}px;
  }

  .mt#{$i} {
    margin-top: #{$i}px;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px;
  }

  .pr#{$i} {
    padding-right: #{$i}px;
  }

  .pt#{$i} {
    padding-top: #{$i}px;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px;
  }

  .pl#{$i} {
    padding-left: #{$i}px;
  }

  .p#{$i} {
    padding: #{$i}px;
  }

  .m#{$i} {
    margin: #{$i}px;
  }

  .f#{$i} {
    font-size: #{$i}px;
  }
}




[rd] {
  background-color: red;
}

[pk] {
  background-color: pink;
}

[gn] {
  background-color: green;
}


.i-icon {
  position: relative;
  display: inline-block;
}

.i-icon:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.bx {
  width: 1200px;
  margin: 0 auto;
}

.fc {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ifc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.fx {
  display: flex;
}

.ifx {
  display: inline-flex;
}

.jc {
  justify-content: center;
}

.js {
  justify-content: flex-start;
}

.je {
  justify-content: flex-end;
}

.jw {
  justify-content: space-between;
}

.ja {
  justify-content: space-around;
}

.f1 {
  flex: 1;
}

.ac {
  align-items: center;
}

.sb {
  justify-content: space-between;
}

.c0 {
  color: #000;
}

.fdc {
  flex-direction: column;
}